<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="header">
			<view class="back-btn" @click="handleBack">
				<text class="back-icon tn-icon-left"></text>
			</view>
			<view class="page-title">发布新活动</view>
			<view class="header-placeholder"></view>
		</view>

		<view class="custom-form">
			<!-- 活动标题 -->
			<view class="form-item">
				<text class="label-text">活动标题</text>
				<tn-input v-model="form.title" placeholder="请输入标题" class="input-field" @blur="markTouched('title')" />
				<text class="error-text" v-if="showError('title')">{{ errors.title }}</text>
			</view>

			<!-- 图片上传 -->
			<view class="form-item upload-item">
				<text class="label-text">活动封面图</text>
				<view class="upload-content">
					<text class="upload-tips">建议尺寸：750×400像素</text>
					<view class="upload-area">
						<view class="custom-upload" @click="chooseImage">
							<view v-if="fileList.length === 0" class="upload-add">
								<text class="add-icon tn-icon-add"></text>
								<text class="add-text">点击上传封面图</text>
							</view>
							<view v-else class="upload-preview">
								<image :src="fileList[0]" mode="aspectFill" class="preview-img"></image>
								<view class="delete-btn" @click.stop="deleteImage">
									<text class="delete-icon tn-icon-close"></text>
								</view>
							</view>
						</view>
					</view>
					<text class="error-text" v-if="showError('coverImage')">{{ errors.coverImage }}</text>
				</view>
			</view>

			<!-- 发起人/组织名称 -->
			<view class="form-item">
				<text class="label-text">发起人/组织</text>
				<tn-input v-model="form.organizer" placeholder="请输入发起人或组织名称" class="input-field"
					@blur="markTouched('organizer')" />
				<text class="error-text" v-if="showError('organizer')">{{ errors.organizer }}</text>
			</view>

			<!-- 发起人类型（个人/组织）- 0=个人，1=组织 -->
			<view class="form-item radio-item">
				<text class="label-text">发起人类型</text>
				<view class="radio-group">
					<view class="radio-option" :class="{ 'active': form.sponsorCategory === 0 }"
						@click="form.sponsorCategory = 0; markTouched('sponsorCategory')">
						<view class="radio-circle" :class="{ 'checked': form.sponsorCategory === 0 }">
							<view class="radio-dot" v-if="form.sponsorCategory === 0"></view>
						</view>
						<text class="radio-text">个人</text>
					</view>
					<view class="radio-option" :class="{ 'active': form.sponsorCategory === 1 }"
						@click="form.sponsorCategory = 1; markTouched('sponsorCategory')">
						<view class="radio-circle" :class="{ 'checked': form.sponsorCategory === 1 }">
							<view class="radio-dot" v-if="form.sponsorCategory === 1"></view>
						</view>
						<text class="radio-text">组织</text>
					</view>
				</view>
				<text class="error-text" v-if="showError('sponsorCategory')">{{ errors.sponsorCategory }}</text>
			</view>

			<!-- 主办方类型 -->
			<view class="form-item radio-item">
				<text class="label-text">主办方类型</text>
				<view class="radio-group">
					<view class="radio-option" :class="{ 'active': form.hostType === 'official' }"
						@click="form.hostType = 'official'; markTouched('hostType')">
						<view class="radio-circle" :class="{ 'checked': form.hostType === 'official' }">
							<view class="radio-dot" v-if="form.hostType === 'official'"></view>
						</view>
						<text class="radio-text">官方</text>
					</view>
					<view class="radio-option" :class="{ 'active': form.hostType === 'local' }"
						@click="form.hostType = 'local'; markTouched('hostType')">
						<view class="radio-circle" :class="{ 'checked': form.hostType === 'local' }">
							<view class="radio-dot" v-if="form.hostType === 'local'"></view>
						</view>
						<text class="radio-text">地方</text>
					</view>
				</view>
				<text class="error-text" v-if="showError('hostType')">{{ errors.hostType }}</text>
			</view>

			<!-- 活动人数 -->
			<view class="form-item">
				<text class="label-text">活动人数</text>
				<tn-input v-model="form.peopleCount" placeholder="请输入活动限制人数" type="number" class="input-field" min="1"
					@blur="markTouched('peopleCount')" />
				<text class="error-text" v-if="showError('peopleCount')">{{ errors.peopleCount }}</text>
			</view>

			<!-- 开始时间 -->
			<view class="form-item time-item">
				<text class="label-text">活动开始时间</text>
				<view class="time-display" @click="showStartPicker(); markTouched('startTime')">
					<view class="selected-time" v-if="startTime">
						<text class="time-icon tn-icon-calendar"></text>
						{{ startTime }}
					</view>
					<view class="placeholder" v-else>
						<text class="time-icon tn-icon-calendar"></text>
						请选择开始时间
					</view>
					<text class="arrow-icon tn-icon-right"></text>
				</view>
				<text class="error-text" v-if="showError('startTime')">{{ errors.startTime }}</text>
			</view>

			<!-- 结束时间 -->
			<view class="form-item time-item">
				<text class="label-text">活动结束时间</text>
				<view class="time-display" @click="showEndPicker(); markTouched('endTime')">
					<view class="selected-time" v-if="endTime">
						<text class="time-icon tn-icon-calendar"></text>
						{{ endTime }}
					</view>
					<view class="placeholder" v-else>
						<text class="time-icon tn-icon-calendar"></text>
						请选择结束时间
					</view>
					<text class="arrow-icon tn-icon-right"></text>
				</view>
				<text class="error-text" v-if="showError('endTime')">{{ errors.endTime }}</text>
			</view>

			<!-- 报名截止时间 -->
			<view class="form-item time-item">
				<text class="label-text">报名截止时间</text>
				<view class="time-display" @click="showDeadlinePicker(); markTouched('registrationDeadline')">
					<view class="selected-time" v-if="registrationDeadline">
						<text class="time-icon tn-icon-calendar"></text>
						{{ registrationDeadline }}
					</view>
					<view class="placeholder" v-else>
						<text class="time-icon tn-icon-calendar"></text>
						请选择报名截止时间
					</view>
					<text class="arrow-icon tn-icon-right"></text>
				</view>
				<text class="error-text"
					v-if="showError('registrationDeadline')">{{ errors.registrationDeadline }}</text>
			</view>

			<!-- 活动地点 -->
			<view class="form-item">
				<text class="label-text">活动地点</text>
				<tn-input v-model="form.location" placeholder="请输入详细的活动地点" class="input-field"
					@blur="markTouched('location')" />
				<text class="error-text" v-if="showError('location')">{{ errors.location }}</text>
			</view>

			<!-- 活动详情 -->
			<view class="form-item detail-item">
				<text class="label-text">活动详情</text>
				<tn-input v-model="form.detail" type="textarea" placeholder="请输入活动详情，包括活动介绍、亮点、流程等" autoHeight
					:max-length="2000" class="input-field" @blur="markTouched('detail')"></tn-input>
				<text class="error-text" v-if="showError('detail')">{{ errors.detail }}</text>
				<view class="word-count">
					{{ form.detail.length }}/2000
				</view>
			</view>

			<!-- 联系电话 -->
			<view class="form-item">
				<text class="label-text">联系电话</text>
				<tn-input v-model="form.contact" placeholder="请输入联系电话" type="number" class="input-field"
					@blur="markTouched('contact')" />
				<text class="error-text" v-if="showError('contact')">{{ errors.contact }}</text>
			</view>

			<!-- 提交按钮 -->
			<view class="submit-area">
				<button class="submit-btn" @click="handleSubmit" :disabled="submitting">
					<text v-if="!submitting">发布活动</text>
					<text v-if="submitting">发布中...</text>
				</button>
			</view>
		</view>

		<!-- 时间选择器 -->
		<tn-picker mode="time" v-model="showStart" :params="params" @confirm="onStartConfirm"
			@cancel="onCancel"></tn-picker>
		<tn-picker mode="time" v-model="showEnd" :params="params" @confirm="onEndConfirm"
			@cancel="onCancel"></tn-picker>
		<tn-picker mode="time" v-model="showDeadline" :params="params" @confirm="onDeadlineConfirm"
			@cancel="onCancel"></tn-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				// 图片上传相关
				fileList: [],
				imageUrl: '',
				// 时间选择器
				showStart: false,
				showEnd: false,
				showDeadline: false,
				startTime: '',
				endTime: '',
				registrationDeadline: '',
				// 表单数据
				form: {
					title: '',
					organizer: '',
					sponsorCategory: null, // 发起人类型（0=个人，1=组织，初始未选择）
					hostType: '', // 主办方类型（official/local）
					peopleCount: '',
					location: '',
					contact: '',
					detail: ''
				},
				// 验证相关
				errors: {},
				touched: {
					title: false,
					coverImage: false,
					organizer: false,
					sponsorCategory: false,
					hostType: false,
					peopleCount: false,
					startTime: false,
					endTime: false,
					registrationDeadline: false,
					location: false,
					detail: false,
					contact: false
				},
				submitAttempted: false,
				submitting: false
			}
		},
		methods: {
			handleBack() {
				uni.navigateBack()
			},
			// 时间选择器显示控制
			showStartPicker() {
				this.showStart = true
			},
			showEndPicker() {
				this.showEnd = true
			},
			showDeadlinePicker() {
				this.showDeadline = true
			},

			// 时间选择确认
			onStartConfirm(e) {
				this.startTime =
					`${e.year}年${e.month}月${e.day}日 ${e.hour.toString().padStart(2, '0')}:${e.minute.toString().padStart(2, '0')}`;
				if (!this.parseChineseTime(this.startTime)) {
					uni.showToast({
						title: '时间格式错误，请重新选择',
						icon: 'none'
					});
					this.startTime = '';
				}
				this.showStart = false;
			},
			onEndConfirm(e) {
				this.endTime =
					`${e.year}年${e.month}月${e.day}日 ${e.hour.toString().padStart(2, '0')}:${e.minute.toString().padStart(2, '0')}`;
				if (!this.parseChineseTime(this.endTime)) {
					uni.showToast({
						title: '时间格式错误，请重新选择',
						icon: 'none'
					});
					this.endTime = '';
				}
				this.showEnd = false;
			},
			onDeadlineConfirm(e) {
				this.registrationDeadline =
					`${e.year}年${e.month}月${e.day}日 ${e.hour.toString().padStart(2, '0')}:${e.minute.toString().padStart(2, '0')}`;
				if (!this.parseChineseTime(this.registrationDeadline)) {
					uni.showToast({
						title: '时间格式错误，请重新选择',
						icon: 'none'
					});
					this.registrationDeadline = '';
				}
				this.showDeadline = false;
			},
			onCancel() {
				this.showStart = false;
				this.showEnd = false;
				this.showDeadline = false;
			},

			// 转换中文时间字符串为Date对象
			parseChineseTime(timeStr) {
				if (!timeStr) return null;
				const regex = /^(\d{4})年(\d{1,2})月(\d{1,2})日 (\d{1,2}):(\d{1,2})$/;
				const match = timeStr.match(regex);
				if (!match) return null;

				const year = parseInt(match[1], 10);
				const month = parseInt(match[2], 10) - 1; // 月份从0开始，需减1
				const day = parseInt(match[3], 10);
				const hour = parseInt(match[4], 10);
				const minute = parseInt(match[5], 10);

				const date = new Date(year, month, day, hour, minute);
				return date.toString() !== 'Invalid Date' ? date : null;
			},

			// 核心修复：转换Date对象为LocalDateTime格式（yyyy-MM-ddTHH:mm:ss）
			formatToLocalDateTime(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份+1后补零
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');
				const second = String(date.getSeconds()).padStart(2, '0'); // 补零确保格式正确
				return `${year}-${month}-${day}T${hour}:${minute}:${second}`;
			},

			// 标记字段为已触碰
			markTouched(field) {
				this.touched[field] = true;
				if (this.submitAttempted) this.validateForm();
			},

			// 显示错误提示
			showError(field) {
				return (this.touched[field] || this.submitAttempted) && this.errors[field];
			},

			// 表单验证
			validateForm() {
				const errors = {};
				const phoneReg = /^1[3-9]\d{9}$/;

				// 活动标题
				if (!this.form.title.trim()) errors.title = '请输入活动标题';
				else if (this.form.title.length > 50) errors.title = '标题不能超过50个字';

				// 封面图
				if (this.fileList.length === 0) errors.coverImage = '请上传活动封面图';

				// 发起人/组织名称
				if (!this.form.organizer.trim()) errors.organizer = '请输入发起人或组织名称';

				// 发起人类型（0=个人，1=组织）
				if (this.form.sponsorCategory === null || this.form.sponsorCategory === undefined) {
					errors.sponsorCategory = '请选择发起人类型（个人/组织）';
				} else if (![0, 1].includes(this.form.sponsorCategory)) {
					errors.sponsorCategory = '发起人类型选择错误，请重新选择';
				}

				// 主办方类型
				if (!this.form.hostType) errors.hostType = '请选择主办方类型';

				// 活动人数
				if (!this.form.peopleCount || this.form.peopleCount < 1) errors.peopleCount = '请输入有效的活动人数（至少1人）';

				// 开始时间
				if (!this.startTime) errors.startTime = '请选择活动开始时间';
				else if (!this.parseChineseTime(this.startTime)) errors.startTime = '时间格式错误';
				else if (this.parseChineseTime(this.startTime) <= new Date()) errors.startTime = '开始时间必须晚于当前时间';

				// 结束时间
				if (!this.endTime) errors.endTime = '请选择活动结束时间';
				else if (!this.parseChineseTime(this.endTime)) errors.endTime = '时间格式错误';
				else if (this.startTime && this.parseChineseTime(this.endTime) <= this.parseChineseTime(this.startTime)) {
					errors.endTime = '结束时间必须晚于开始时间';
				}

				// 报名截止时间
				if (!this.registrationDeadline) errors.registrationDeadline = '请选择报名截止时间';
				else if (!this.parseChineseTime(this.registrationDeadline)) errors.registrationDeadline = '时间格式错误';
				else if (this.startTime && this.parseChineseTime(this.registrationDeadline) >= this.parseChineseTime(this
						.startTime)) {
					errors.registrationDeadline = '报名截止时间必须早于活动开始时间';
				}

				// 活动地点
				if (!this.form.location.trim()) errors.location = '请输入活动地点';

				// 活动详情
				if (!this.form.detail.trim()) errors.detail = '请输入活动详情';
				else if (this.form.detail.length < 10) errors.detail = '详情内容不能少于10个字';

				// 联系电话
				if (!this.form.contact) errors.contact = '请输入联系电话';
				else if (!phoneReg.test(this.form.contact)) errors.contact = '请输入有效的手机号码';

				this.errors = errors;
				return Object.keys(errors).length === 0;
			},

			// 选择图片
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.fileList = res.tempFilePaths;
						this.uploadImage(res.tempFilePaths[0]);
					}
				});
			},

			// 上传图片
			uploadImage(tempFilePath) {
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
					url: 'http://localhost:8080/api/activities/uploadCover',
					filePath: tempFilePath,
					name: 'file',
					success: (uploadRes) => {
						uni.hideLoading();
						try {
							const data = JSON.parse(uploadRes.data);
							if (data.code === 200 && data.data) {
								this.imageUrl = data.data;
								this.fileList = [tempFilePath];
							} else {
								uni.showToast({
									title: data.msg || '图片上传失败',
									icon: 'none'
								});
								this.fileList = [];
								this.imageUrl = '';
							}
						} catch (e) {
							console.error('解析响应失败', e);
							uni.showToast({
								title: '图片上传失败',
								icon: 'none'
							});
							this.fileList = [];
							this.imageUrl = '';
						}
					},
					fail: (err) => {
						uni.hideLoading();
						console.error('上传失败', err);
						uni.showToast({
							title: '网络错误，上传失败',
							icon: 'none'
						});
						this.fileList = [];
						this.imageUrl = '';
					}
				});
			},

			// 删除图片
			deleteImage() {
				this.fileList = [];
				this.imageUrl = '';
			},

			// 提交表单
			async handleSubmit() {
				this.submitAttempted = true;
				if (!this.validateForm()) {
					uni.showToast({
						title: Object.values(this.errors)[0],
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.imageUrl) {
					uni.showToast({
						title: '图片上传中，请稍后重试',
						icon: 'none'
					});
					return;
				}

				try {
					this.submitting = true;
					uni.showLoading({
						title: '发布中...'
					});

					// 转换时间
					const startDate = this.parseChineseTime(this.startTime);
					const endDate = this.parseChineseTime(this.endTime);
					const deadlineDate = this.parseChineseTime(this.registrationDeadline);
					if (!startDate || !endDate || !deadlineDate) {
						throw new Error('时间格式错误，请重新选择');
					}

					// 提交表单（使用LocalDateTime格式）
					const uploadResult = await uni.uploadFile({
						url: 'http://localhost:8080/api/activities/publish',
						filePath: '', // 封面图已提前上传，此处留空
						name: 'file', // 保留文件参数名，避免后端解析错误
						formData: {
							coverImageUrl: this.imageUrl,
							title: this.form.title,
							type: this.form.sponsorCategory, // 传递数字0或1（与后端Integer匹配）
							organizerId: this.form.organizer, // 实际应替换为登录用户ID（数字类型）
							maxParticipants: this.form.peopleCount,
							location: this.form.location,
							// 核心修复：使用新方法转换为LocalDateTime格式（yyyy-MM-ddTHH:mm:ss）
							startTime: this.formatToLocalDateTime(startDate),
							endTime: this.formatToLocalDateTime(endDate),
							registrationDeadline: this.formatToLocalDateTime(deadlineDate),
							contactPhone: this.form.contact,
							status: 0,
							details: this.form.detail,
							sponsorType: this.form.hostType === 'official' ? 1 : 2
						}
					});

					// 解析上传结果
					const err = uploadResult[0];
					const res = uploadResult[1];

					uni.hideLoading();

					// 处理网络错误
					if (err) {
						throw new Error(`网络请求失败：${err.errMsg || '未知错误'}`);
					}

					// 解析响应数据
					let responseData;
					try {
						responseData = JSON.parse(res.data);
					} catch (e) {
						throw new Error('服务器返回格式错误，无法解析');
					}

					// 处理业务状态
					if (res.statusCode === 200 && responseData.code === 200) {
						uni.showToast({
							title: '发布成功',
							icon: 'success'
						});
						setTimeout(() => uni.navigateBack(), 1500);
					} else {
						const errorMsg = responseData?.msg || `发布失败（状态码：${res.statusCode}）`;
						throw new Error(errorMsg);
					}

				} catch (error) {
					uni.hideLoading();
					console.error('发布失败详情：', error);
					uni.showToast({
						title: error.message || '发布失败，请稍后重试',
						icon: 'none',
						duration: 2000
					});
					this.submitting = false;
				}
			}
		},
		watch: {
			form: {
				deep: true,
				handler() {
					if (Object.values(this.touched).some(t => t) || this.submitAttempted) this.validateForm();
				}
			},
			startTime() {
				if (this.touched.startTime || this.submitAttempted) this.validateForm();
			},
			endTime() {
				if (this.touched.endTime || this.submitAttempted) this.validateForm();
			},
			registrationDeadline() {
				if (this.touched.registrationDeadline || this.submitAttempted) this.validateForm();
			},
			fileList() {
				if (this.touched.coverImage || this.submitAttempted) this.validateForm();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.upload-add {
		width: 100%;
		max-width: 540rpx;
		height: 240rpx;
		border: 2rpx dashed #e0e0e0;
		border-radius: 16rpx;
		background: #f8f9fa;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		transition: all 0.3s;

		&:hover {
			border-color: #007AFF;
			background-color: #f0f7ff;
		}

		.add-icon {
			font-size: 52rpx;
			color: #c0c4cc;
			margin-bottom: 16rpx;
		}

		.add-text {
			font-size: 28rpx;
			color: #909399;
		}
	}

	.upload-preview {
		width: 100%;
		max-width: 540rpx;
		height: 240rpx;
		border-radius: 16rpx;
		overflow: hidden;
		position: relative;

		.preview-img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.delete-btn {
			position: absolute;
			top: 12rpx;
			right: 12rpx;
			width: 44rpx;
			height: 44rpx;
			background: rgba(0, 0, 0, 0.6);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.2s;

			&:active {
				background: rgba(0, 0, 0, 0.8);
			}

			.delete-icon {
				font-size: 24rpx;
				color: #ffffff;
			}
		}
	}

	.error-text {
		position: absolute;
		right: 30rpx;
		bottom: 10rpx;
		font-size: 24rpx;
		color: #ff4d4f;
		line-height: 1.2;
	}

	.detail-item {
		align-items: flex-start;
		padding-top: 32rpx;
		padding-bottom: 32rpx;
		position: relative;

		.word-count {
			align-self: flex-end;
			margin-top: 10rpx;
			font-size: 24rpx;
			color: #999;
		}
	}

	.form-item {
		display: flex;
		align-items: center;
		padding: 32rpx 30rpx;
		min-height: 108rpx;
		border-bottom: 1rpx solid #f8f9fa;
		position: relative;

		&:last-child {
			border-bottom: none;
		}
	}

	.radio-item {
		.radio-group {
			flex: 1;
			display: flex;
			gap: 40rpx;
			padding: 10rpx 0;
		}

		.radio-option {
			display: flex;
			align-items: center;
			cursor: pointer;
			padding: 8rpx 0;

			.radio-circle {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				border: 2rpx solid #c0c4cc;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 16rpx;
				transition: all 0.2s;

				&.checked {
					border-color: #007AFF;
					background-color: #007AFF;
				}
			}

			.radio-dot {
				width: 18rpx;
				height: 18rpx;
				border-radius: 50%;
				background-color: #fff;
				transform: scale(0);
				transition: transform 0.2s;

				.radio-circle.checked & {
					transform: scale(1);
				}
			}

			.radio-text {
				font-size: 30rpx;
				color: #333;
				transition: color 0.2s;
			}

			&.active .radio-text {
				color: #007AFF;
			}
		}
	}

	::v-deep .detail-item .tn-input {
		&__wrapper {
			border: none !important;
			background: transparent !important;
			padding: 0 !important;
			min-height: 180rpx;
		}

		&__input {
			font-size: 30rpx;
			color: #333;
			line-height: 1.6;
			word-break: break-all;
		}

		&__placeholder {
			font-size: 30rpx;
			color: #c0c4cc;
			line-height: 1.6;
		}
	}

	.container {
		padding: 30rpx;
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
		height: 80rpx;
	}

	.back-btn {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: #ffffff;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		transition: all 0.2s;

		&:active {
			transform: scale(0.95);
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		}

		.back-icon {
			font-size: 36rpx;
			color: #333;
		}
	}

	.page-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		text-align: center;
		flex: 1;
	}

	.header-placeholder {
		width: 80rpx;
	}

	.custom-form {
		background: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
	}

	.label-text {
		white-space: nowrap;
		width: 200rpx;
		flex-shrink: 0;
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		line-height: 1.4;
	}

	.input-field {
		flex: 1;

		::v-deep .tn-input {
			&__wrapper {
				border: none !important;
				background: transparent !important;
				padding: 0 !important;
				min-height: 48rpx;
			}

			&__input {
				font-size: 30rpx;
				color: #333;
				line-height: 1.4;
			}

			&__placeholder {
				font-size: 30rpx;
				color: #c0c4cc;
			}
		}
	}

	.upload-item {
		align-items: flex-start;
		padding-top: 36rpx;
		padding-bottom: 36rpx;

		.upload-content {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 20rpx;
		}

		.upload-tips {
			font-size: 26rpx;
			color: #999;
			line-height: 1.4;
			padding-left: 4rpx;
		}

		.upload-area {
			width: 100%;
			transition: all 0.2s;
		}
	}

	.time-item {
		.time-display {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0;
			font-size: 30rpx;
			color: #333;
			line-height: 1.4;
		}

		.selected-time,
		.placeholder {
			display: flex;
			align-items: center;
			flex: 1;
		}

		.placeholder {
			color: #c0c4cc;
		}

		.time-icon {
			margin-right: 16rpx;
			font-size: 34rpx;
			color: #c0c4cc;
		}

		.arrow-icon {
			font-size: 28rpx;
			color: #c0c4cc;
			margin-left: 16rpx;
		}
	}

	.submit-area {
		padding: 40rpx 30rpx;
		background-color: #fafafa;
		margin-top: 20rpx;

		.submit-btn {
			width: 100%;
			height: 96rpx;
			line-height: 96rpx;
			background-color: #007356;
			color: #fff;
			font-size: 34rpx;
			font-weight: 500;
			border-radius: 16rpx;
			border: none;
			box-shadow: 0 6rpx 16rpx rgba(0, 122, 255, 0.2);
			transition: all 0.3s;

			&:active {
				background-color: #0066cc;
				transform: scale(0.99);
				box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.15);
			}

			&:disabled {
				background-color: #c0c4cc;
				box-shadow: none;
				opacity: 0.7;
			}
		}
	}
</style>